<template>
	<div class="carry" :style="{height: carryHeight + 'px'}">
        <div class="form">
            <div class="form-item">
                <img src="../assets/img/yijihuiyuan.png" class="huiyuan">99<img src="../assets/img/renchar.png" class="ren">
            </div>
            <div class="form-item">
                <img src="../assets/img/erjihuiyuan.png" class="huiyuan">99<img src="../assets/img/renchar.png" class="ren">
            </div>
            <div class="form-item">
                <img src="../assets/img/sanjihuiyuan.png" class="huiyuan">99<img src="../assets/img/renchar.png" class="ren">
            </div>
        </div>
		<bottom-nav></bottom-nav>
	</div>
</template>

<script>
	import bottomNav from './bottomNav'
	export default {
		name: 'carry',
		data () {
			return {
                carryHeight: 0
			}
		},
		components: {bottomNav},
		mounted () {
			
		},
		created() {
            this.init();
		},
		methods: {
			init () {
				this.carryHeight = (document.documentElement.clientHeight - document.documentElement.clientHeight/750*4.9*10);			
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carry{padding-top: 19rem;background: url(../assets/img/bg3Top.png) top center no-repeat, url(../assets/img/bg1Bottom.jpg) bottom center no-repeat;background-size: 100% auto;width: 100%;box-sizing: border-box;}
.form{margin: 0 auto;padding: 3rem 6.5rem;width: 27.9rem;height: 27.5rem;border: 4px solid #fbcd91;border-radius: 12px;background: #fff;box-sizing: border-box;}
.form .form-item{margin: 3.5rem 0;font-size: 1.85rem;color: #ef2238;font-weight: bold;height: 1.85rem;line-height: 1.85rem;}
.form .form-item .huiyuan{width: 8.5rem;height: 1.85rem;margin-right: 1rem;}
.form .form-item .ren{width: 1.85rem;height: 1.7rem;}
</style>
